<template>
  <Dialog class="single-column" :title="currentRow.id ? '修改回访':'增加回访'" :loading="loading" :visible="visible" button-text="提交" :reveal="true" @close="handleClose" @confirm="balanceSubmit">
    <!-- 增加回访计划 -->
    <div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="顾客：" prop="customerName">
          <el-select v-model="customerName" filterable placeholder="请选择顾客" class="el-select-y" @change="customerChange">
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="回访类型：" prop="returnVisitType">
          <el-select v-model="ruleForm.returnVisitType" filterable placeholder="请选择回访类型" class="el-select-y" @change="returnVisitTypeChange">
            <el-option
              v-for="item in returnVisitTypeList"
              v-show="item.id !== 0"
              :key="item.id"
              :label="item.value"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="ruleForm.returnVisitType === '术后回访' && ruleForm.customerName" label="关联项目" prop="name">
        <el-select v-model="ruleForm.relationNo" placeholder="请选择关联项目" @change="relationChange">
          <el-option
            v-for="item in projectNameOptions"
            :key="item.id"
            :label="item.projectName"
            :value="item.id"
          >
            <el-col :span="12">{{ item.projectName }}</el-col>
            <el-col :span="12">{{ item.attendingDoctor }}</el-col>
          </el-option>
        </el-select>
      </el-form-item> -->
        <el-form-item label="联系电话：" prop="customerPhone">
          <el-input v-model.number="ruleForm.customerPhone" />
        </el-form-item>
        <el-form-item label="计划日期：" prop="plannedReturnVisitDate">
          <el-date-picker
            v-model="plannedReturnVisitDate"
            type="date"
            placeholder="选择计划日期："
            :picker-options="pickerOptions"
            @change="plannedReturnVisitDateChange"
          />
        </el-form-item>
        <el-form-item label="回访人：" prop="revisiterName">
          <el-select v-model="ruleForm.revisiterId" filterable placeholder="请选择回访人" class="el-select-y" @change="registrantChange">
            <el-option
              v-for="item in attributionConsultantList"
              :key="item.id"
              :label="item.usrName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" prop="remarks">
          <el-input v-model="ruleForm.remarks" type="textarea" :rows="2" placeholder="请输入内容" class="textarea-border" />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    returnVisitTypeList: {
      type: Array,
      default: () => ([]),
    },
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        customerName: [
          { message: '请选择顾客', trigger: 'blur', required: true },
        ],
        returnVisitType: [
          { message: '请选择回访类型', trigger: 'change', required: true },
        ],
        customerPhone: [
          { message: '请输入联系电话', trigger: 'blur', required: true },
        ],
        plannedReturnVisitDate: [
          { message: '请选择计划日期', trigger: 'change', required: true },
        ],
        revisiterName: [
          { message: '请选择回访人', trigger: 'change', required: true },
        ],
      },
      customerList: [],
      loading: false,
      relationProjectList: [],
      attributionConsultantList: [],
      projectNameOptions: [],
      pickerOptions: {
        disabledDate(time) {
          const times = Date.now() - 24 * 60 * 60 * 1000;
          return time.getTime() < times;
        },
      },
      customerName: '',
      plannedReturnVisitDate: '',
    };
  },
  watch: {
    currentRow: {
      handler(val) {
        if (val) {
          console.log(val);
          this.customerName = val.customerId;
          this.plannedReturnVisitDate = val.plannedReturnVisitDate;
          this.ruleForm = val;
        } else {
          this.customerName = '';
          this.plannedReturnVisitDate = '';
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getAllCustomer();
    this.attributionConsultant();
  },
  methods: {
    async getAllCustomer() {
      const res = await this.$api["department/consumables/customerall"]();
      if (res.code !== 200) return this.$message.error(res.msg);
      this.customerList = res.data;
    },
    async attributionConsultant() {
      const res = await this.$api['data/hospitalStaff/getAllByJobName']({ hospitalJobName: "咨询师" });
      if (res.code !== 200) return;
      this.attributionConsultantList = res.data;
    },
    async getProjectName() {
      const res = await this.$api['reception/subscribe/customerIdAllByOrderList']({ customerId: this.ruleForm.customerId });
      if (res.code === 200) {
        this.projectNameOptions = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    handleClose() {
      this.$emit("handleClose");
    },
    balanceSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return;
        this.loading = true;
        if (this.currentRow.id) {
          const res = await this.$api['data/returnVisit/modifyReturnVisit']({ ...this.currentRow });
          this.loading = true;
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success("修改回访记录成功");
          this.$emit("handleSuccess");
        } else {
          const res = await this.$api['data/returnVisit/addReturnVisit']({ ...this.ruleForm });
          this.loading = false;
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success("添加回访记录成功");
          this.$emit("handleSuccess");
        }
      });
    },
    customerChange(id) {
      this.customerName = id;
      this.customerList.forEach(item => {
        if (item.id === id) {
          this.ruleForm.customerId = item.id;
          this.ruleForm.customerName = item.name;
          this.ruleForm.customerCode = item.code;
          this.ruleForm.customerSex = item.sex;
          if (item.phone) {
            this.ruleForm.customerPhone = item.phone;
          }
          if (this.ruleForm.returnVisitType === '术后回访') {
            this.getProjectName();
          }
        }
      });
    },
    returnVisitTypeChange(label) {
      if (this.ruleForm.returnVisitType === '术后回访' && this.ruleForm.customerId) {
        this.getProjectName();
      }
    },
    plannedReturnVisitDateChange(val) {
      const date = new Date(val);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.ruleForm.time = year + '-' + month + '-' + day;
      this.ruleForm.plannedReturnVisitDate = year + '-' + month + '-' + day;
      this.ruleForm.plannedDate = date.getTime();
    },
    registrantChange(id) {
      this.attributionConsultantList.forEach(item => {
        if (item.id === id) {
          this.ruleForm.revisiterName = item.usrName;
        }
      });
    },
    relationChange(id) {
      this.projectNameOptions.forEach(item => {
        if (item.id === id) {
          console.log(item);
          this.ruleForm.relationContent = item.projectName;
          this.ruleForm.relationNo = item.orderCode;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pull-right{
  float: right;
}
.font-color{
  color:#FF6600;
}
.button-color{
  color:#0099FF;
  border-color:#0099FF;
}
.clear{
  clear: both;
}
.el-col,.el-col-12{
  line-height: 40px;
}
.dialog-magin-y{
  margin: 0 150px;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>
